<template>
    <div class="goods-onshelf">
        <search-form :searchArray="searchArray"></search-form>
        <div class="table-box">
            <div class="control">
                <el-button type="primary">批量下架</el-button>
            </div>
            <elTable :formData="formData" @tableData="getList" ref="dataInfo">
                <el-table-column prop="name" align="center"
                 type="selection"
                  width="55"
                ></el-table-column>
                <el-table-column prop="name" label="图片" align="center"></el-table-column>
                <el-table-column prop="group" label="名称/楼层" align="center"></el-table-column>
                <el-table-column prop="group" label="所属分类" align="center"></el-table-column>
                <el-table-column prop="group" label="规格/批准文号/厂商" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="已关联供应商" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="会员价" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="零售价" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="医保价" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="更新" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="标签" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button type="error" size="mini" @click="offshelf(scope.row)">下架</el-button>
                        <el-button type="primary" size="mini" @click="upload(scope.row)">首营资料</el-button>
                    </template>
                </el-table-column>
            </elTable>
        </div>
        <dialogs :visible="visible" title="首营资料" width="400px" @confirm="confirm">
            <div class="upload">
                <div class="title">商品名称：{{current.name || ''}}</div>
                <elUpload></elUpload>
            </div>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import elUpload from '@/components/xForm/elUpload'
export default {
    name: 'goodsOnShelf',
    components: {
        elTable,
        elUpload
    },
    data () {
        return {
            visible: {
                show: false
            },
            formData: {
                name: "",
                userName: "",
                userStatus: "",
                currentPage: 1,
                pageSize: 10,
            },
            searchArray: [
                {
                    type: "input",
                    placeholder: "请输入商品名称",
                    types: "text",
                    value: "",
                    label: "商品名称"
                },
                {
                    type: "input",
                    placeholder: "请输入批准文号",
                    types: "text",
                    value: "",
                    label: "批准文号"
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '供货商',
                    list: [
                    {
                        label: "",
                        value: ""
                    }
                    ]
                },
                {
                    type: "input",
                    placeholder: "请输入厂商",
                    types: "text",
                    value: "",
                    label: "厂商"
                },
                {
                    type: "sectionValue",
                    value1: "",
                    value2: "",
                    label: "库存数量",
                    unit: "",
                    key1: "",
                    key2: ""
                },
                {
                    type: "sectionValue",
                    value1: "",
                    value2: "",
                    label: "会员价格",
                    unit: "",
                    key1: "",
                    key2: ""
                },
                {
                    type: "input",
                    placeholder: "请输入批准文号",
                    types: "text",
                    value: "",
                    label: "批准文号"
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '是否有图',
                    list: [
                    {
                        label: "",
                        value: ""
                    }
                    ]
                },
                {
                    type: "datePicker",
                    startText: "开始日期",
                    endText: "结束日期",
                    types: "daterange",
                    value: "",
                    rangeSpeparator: "至",
                    label: '近期推送'
                },
            ],
            current: {}
        }
    },
    methods: {
        getList(pageNo) {
            console.log(1)
            let dataInfo = [
                {
                    id: 1,
                    name: "你好",
                    createTime: '1595244696000'
                },
                {
                    id: 2,
                    name: "你好1",
                    createTime: '1595244696000'
                },
            ];
            let total = 10;
            this.$nextTick(() => {
                this.$refs.dataInfo.loadData(dataInfo, total);
            })
        },
        offshelf () {
            this.$confirm('确定要下架么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '下架成功!'
                });
                }).catch(() => {
            });
        },
        upload (item) {
            this.current = item
            this.visible.show = true
        },
        confirm () {
            this.visible.show = false
        }
    }
}
</script>
<style lang="scss" scoped>
.goods-onshelf {
    .search-form {
        margin-bottom: 15px;
    }
    .table-box {
        background: #fff;
        .control {
            padding: 16px;
            border-bottom: 1px solid #ddd;
        }
    }
}
.upload {
    .title {
        margin-bottom: 16px;
        font-size: 16px;
    }
}
</style>